import React from 'react';
import {Form, Input, Button, Message, DatePicker, Icon, Radio, Upload, Modal } from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

let RoomList = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      imgList: [],
      priviewImage: null,
      priviewVisible: null
    }
  },

  handleSubmit(e) {
    e.preventDefault();

    let rentReserveId = {rentContractId: this.props.location.state.rentContractId, rentReserveId: this.props.location.state.rentReserveId};
    let forms = this.props.form.getFieldsValue();
    let params = Object.assign({},forms, rentReserveId);
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      this.setState({
        loading: true,
      });
      Utils.sendAjax({
        url: '/room/reserve/cancel',
        data: JSON.stringify(params),
        callback: (result) => {
          if (result.code === '200') {
            this.handleBack();
          } else {
            this.setState({
              loading: false,
            });
            Message.error(result.message, 10);
          }
        }
      });
    });
  },

  handleCancel() {
    this.setState({
      priviewVisible: false,
    });
  },

  handleBack() {
    this.context.router.push('/landlord/rentManage/advanceOrder/list');
  },

  render() {
    const _me = this;
    const formData = this.props.location.state;
    const { getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: {span: 4},
      wrapperCol: {span: 6},
    };
    let card = {
      name: 'file',
      data: {nid: 'card'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'card', url: img})
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      }
    };
    return (
      <div className="inner-content">

        <Form horizontal form={this.props.form}>
          <FormItem
            {...formItemLayout}
            label="租客姓名">
            <Input defaultValue={formData.renterName}
              placeholder="租客姓名" disabled/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="租客性别">
            <RadioGroup defaultValue={formData.renterSex ? formData.renterSex : '男'} disabled>
              <Radio value="男">男</Radio>
              <Radio value="女">女</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="联系电话">
            <Input defaultValue={formData.phone}
              placeholder="联系电话" disabled/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="身份证号">
            <Input defaultValue={formData.renterNo} placeholder="身份证号" disabled/>
          </FormItem>

          <FormItem
            {...formItemLayout}
            className="order-date"
            label="预约入住时间">
            <DatePicker defaultValue={formData.checkinTime} disabled/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="订金">
            <Input defaultValue={formData.reserveAmount} addonAfter="元" placeholder="订金" disabled/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="租金">
            <Input defaultValue={formData.rent} addonAfter="元/月"  placeholder="租金" disabled/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="退回订金">
            <Input {...getFieldProps('returnMoney', {initialValue: formData.reserveAmount})} addonAfter="元" placeholder="退回订金"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="备注">
            <Input type="textarea" {...getFieldProps('remark')} placeholder="备注信息"/>
          </FormItem>
          <FormItem
            wrapperCol={{ span: 10, offset: 4 }} style={{ marginTop: 24 }}>
            <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>取消预订</Button>
            <Button style={{ marginLeft: 20 }} onClick={this.handleBack}>返回</Button>
          </FormItem>
        </Form>
        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" src={this.state.priviewImage}/>
        </Modal>
      </div>
    );
  }
});
RoomList = Form.create()(RoomList);
export default RoomList